<template>
  <el-header>
    <div class="logo" >
      <img src="/public/img/logo.png" alt="WPan" @click="logoClick"/>
    </div>
    <!-- 顶部菜单 -->
    <el-menu
      v-if="showMenu"
      class="navbar"
      :default-active="menuActive"
      mode="horizontal"
      style="width: 100%"
      router
    >
      <el-menu-item
        v-for="(menu, index) in menus.slice(0, 5)"
        :key="index"
        :index="`/wpan/${menu.name}`"
      >{{ menu.title }}</el-menu-item>
    
      <el-submenu index="more" v-show="menus.length > 5">
        <template slot="title">更多</template>
        <el-menu-item
          v-for="(menu, index) in menus.slice(5)"
          :key="index"
          :index="menu.path"
        >{{ menu.title }}</el-menu-item>
      </el-submenu>
    </el-menu>
    
    <!-- 顶部个人中心 -->
    <el-dropdown class="user" trigger="hover" @command="handleCommand">
      <div class="info">
        <el-avatar :size="30" :src="user.profile.avatar"  alt="avatar"/>
        <span>{{ user.profile.nickname }}</span>
      </div>     
      <template #dropdown >
        <el-dropdown-menu class="userInfo-dialog">
          <div class="top">
            <el-row justify="center" >
              <el-avatar :size="50" :src="user.profile.avatar"></el-avatar>
            </el-row>
            <el-row class="content">
              <div class="title">存储空间</div>
              <el-progress :percentage="user.storage.percentage" style="width: 100%"/>
              <span style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem">{{ user.storage.used}}/{{ user.storage.max }}</span>
            </el-row>
          </div>           
          <el-dropdown-item icon="el-icon-set-up" command="admin">管理后台</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" command="signout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    
  </el-header>
</template>

<script>
import userInfo from '@/data/user.js'
export default {
  props: {
    menus: Array,
    logined: Boolean,
  },
  data() {
    return {
      user:{
         profile: {},
         storage: {},
      }
    };
  },
  computed: {
    showMenu() {
      return this.menus && this.menus.length > 0;
    },
    menuActive() {
      return `/wpan/${this.$route.params.sname}`;
    },
  },
  mounted() {
    this.getUserInfo();    
  },
  methods: {
    logoClick() {
      this.$router.push("/wpan/oss")
    },

    getUserInfo() {
      this.user=userInfo;
    },
    handleCommand (command){
      if("admin"==command){
        this.$router.push("/")
      }else if("signout"==command){
          this.$confirm("退出系统, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.push({ path: "/login" });
          });
        });
      }   
    }
  },
  
};
</script>

<style lang="scss">
.el-header {
  display: flex;
  line-height: 60px;
  background-color: #fff;
  box-shadow: 1px 1px 8px #c9c9c9;
  margin-bottom: 5px;
}
.el-header .logo {
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.logo img {
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.el-header .navbar {
  font-weight: bold;
}

.el-header {
  .user{
    display: flex;
    align-items: center;
    .info{
      display: flex;
      align-items: center;
      span{
        margin-left: 5px;
        font-family: "Microsoft YaHei";
        font-size:16px;
      }
    }  
  } 
}
.userInfo-dialog{
    width:200px;
    .top{
      padding:10px 20px;
      .content{
        margin-top: 15px;
        font-size: 15px;
      }
    }
  }


</style>